<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1"
    />
    <title>我的-邮箱设置</title>

    <link rel="stylesheet" href="../css/mui.min.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../css/app.css" />
    <script src="../js/vue.js"></script>
    <script src="../js/flexible.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/sm2.js"></script>
    <script src="../js/sm3.js"></script>
    <script src="../js/vconsole.min.js"></script>
    <script src="./text.js" type="text/javascript"></script>
    <style>
      /* #app{
        width: 100%;
        height: 100%;
      } */
      .box {
        position: relative;
        width: 100%;
        height: 100%;
        color: #f7faff;
        /* padding-top: 0.25rem; */
      }

      .box .a {
        color: black;
        /* position: absolute; */
        /* top: 0rem; */
        /* left: 0rem; */
        padding: 0.3rem 0.2rem;
        width: 100%;
        background: #fff;
        height: calc(100vh - 2.5rem);
        margin-top: 0.2rem;
      }

      .box .u .c img {
        position: absolute;
        width: 13rem;
        height: 8rem;
        left: 10rem;
      }

      .box .u .d img {
        position: absolute;
        width: 14rem;
        height: 6rem;
        top: 29rem;
        left: -5rem;
      }

      .box .a .e {
        width: 100%;
        margin-top: 0.3rem;
      }

      .box .a .j {
        width: 100%;
        margin-top: 0.3rem;
      }

      .box .a .r {
        /* width: 25%;
        background-color: rgb(25, 179, 182);
        color: #fff;
        border: none; */
        /* position: absolute; */
      }

      /* WebKit browsers */
      ::-webkit-input-placeholder {
        color: #d8e6fe;
      }

      /* Mozilla Firefox 4 to 18 */
      :-moz-placeholder {
        color: #d8e6fe;
        opacity: 1;
      }

      /* Mozilla Firefox 19+ */
      ::-moz-placeholder {
        color: #d8e6fe;
        opacity: 1;
      }

      /* Internet Explorer 10+ */
      :-ms-input-placeholder {
        color: #d8e6fe;
      }

      .mui-toast-container {
        top: 50%;
      }

      .a .title {
        font-size: 0.3rem;
        display: inline-block;
        width: 100%;
        color: #333;
        /* text-align: right; */
      }

      .titleInput {
        outline: 0;
        -web-kit-appearance: none;
        -moz-appearance: none;
        font-size: 0.27rem;
        /* height: 0.5rem; */
        border-radius: 4px;
        /* border: 1px solid #d8e6fe; */
        border: none !important;
        border-bottom: 1px solid #d8e6fe !important;
        color: rgb(153, 170, 189);
        /* width: 100%; */
        margin-bottom: 0.2rem;
        -webkit-user-select: auto;
        background-color: transparent !important;
        -moz-user-select: auto;
        padding: 0.1rem 0.1rem;
      }

      /* WebKit browsers */
      ::-webkit-input-placeholder {
        color: #d8e6fe;
      }

      /* Mozilla Firefox 4 to 18 */
      :-moz-placeholder {
        color: #d8e6fe;
        opacity: 1;
      }

      /* Mozilla Firefox 19+ */
      ::-moz-placeholder {
        color: #d8e6fe;
        opacity: 1;
      }

      /* Internet Explorer 10+ */
      :-ms-input-placeholder {
        color: #d8e6fe;
      }

      .mui-btn,
      button,
      input[type="button"],
      input[type="reset"],
      input[type="submit"] {
        padding: 0;
      }

      .y {
        background-image: linear-gradient(
          to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182)
        ) !important;
        color: #fff;
        border: none;
        margin: 0 auto;
        width: 100%;
        text-align: center;
        padding: 0.3rem 0.1rem;
        /* position: fixed; */
        /* bottom: 0; */
        /* left: 0; */
      }

      .wode {
        position: absolute;
        top: 0;
        right: 0;
        width: 80%;
        margin-top: 0.5rem;
      }

      .wode3 {
        position: absolute;
        bottom: 0;
        left: 0;
        margin-bottom: 1rem;
        width: 100%;
      }

      .mui-toast-container {
        top: 30%;
      }

      .disabledB {
        font-size: 0.2rem;
        padding: 0.23rem 0 !important;
        margin-top: 0.15rem !important;
        height: 0.8rem;
      }

      .boxtitle {
        font-weight: 600;
        color: #fff;
        margin-right: 0.5rem;
      }

      .boxTop {
        text-align: center;
        padding: 0.3rem 0;
        background-image: linear-gradient(
          to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182)
        );
        box-shadow: 4px 4px 4px #ccc;
      }

      .boxyz {
        position: relative;
        width: 100%;
      }

      .r {
        position: absolute !important;
        right: 0;
        top: 0;
        border: 1px solid rgb(81, 156, 156) !important;
        margin-top: 0.2rem;
        color: rgb(81, 156, 156) !important;
        font-weight: bold !important;
        padding: 0 0.2rem !important;
      }

      input::-webkit-input-placeholder {
        color: rgb(151, 168, 197);
      }

      a {
        color: #fff;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="boxTop">
        <a
          class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"
          @click="home"
        ></a>
        <span class="boxtitle">邮箱设置</span>
      </div>
      <!-- <img src="../image/wode.png" alt="" class="wode" />
    <img src="../image/wode3.png" alt="" class="wode3" /> -->
      <div style="padding: 0 0.2rem">
        <div class="a">
          <div class="">
            <p class="title">内网邮箱</p>
            <input
              type="text"
              placeholder="请输入内网邮箱"
              class="j titleInput"
              v-model="toMail"
            />
          </div>
          <div class="uldisplay1">
            <span class="title"> 验证码</span>
            <div class="boxyz">
              <input
                type="text"
                v-model="verificationNum"
                class="e titleInput"
                placeholder="请输入验证码"
              />
              <input
                v-show="sendAuthCode1"
                type="button"
                value="获取验证码"
                class="r titleInput"
                style="height: 0.8rem"
                @click="verification "
              />
              <button
                v-show="!sendAuthCode1"
                type="button"
                disabled
                class="r titleInput disabledB"
              >
                {{time1}}秒后重新发送
              </button>
            </div>
            <!-- <p style="width: 25%"></p> -->
          </div>
          <div
            style="
              padding: 0 0.2rem;
              position: fixed;
              left: 0;
              bottom: 0;
              width: 100%;
            "
          >
            <p class="btn titleInput y" @click="btn">确认设置</p>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script>
    new Vue({
      el: ".box",

      data() {
        return {
          fileContent: "",
          toMail: "",
          verificationNum: "",
          sendAuthCode1: true,
          time1: 90,
        };
      },
      methods: {
        // 发送验证码
        verification() {
          if (this.toMail == "") {
            return mui.toast("内网邮箱不能为空", {
              duration: "long",
              type: "div",
            });
            // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
          } else if (this.toMail.indexOf(" ") != -1) {
            return mui.toast("内网邮箱不能含有空格", {
              duration: "long",
              type: "div",
            });
          } else {
            // substring() 方法用于提取字符串中介于两个指定下标之间的字符
            const mailLast = this.toMail.substring(
              this.toMail.length - 11,
              this.toMail.length
            );
            const mailMiddle = this.toMail.indexOf("@");
            if (mailMiddle != -1 && isFlag == true) {
              this.checkVerification();
            } else if (
              mailMiddle != -1 &&
              mailLast == "sgcc.com.cn" &&
              isFlag == false
            ) {
              this.checkVerification();
            } else {
              return mui.toast("内网邮箱格式不正确", {
                duration: "long",
                type: "div",
              });
            }
          }
        },
        checkVerification() {
          userId = sessionStorage.getItem("userId");
          orgId = sessionStorage.getItem("unitId");
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = "";
          }
          let timestamp = new Date().getTime() + "";
          let data = {
            userId: userId,
            orgId: orgId,
            mail: this.toMail,
            timestamp: timestamp,
          };
          data = JSON.stringify(data);
          let AuthenticationSession = sessionStorage.getItem("Authentication");
          let sign = sm3(data);
          $.ajax({
            method: "POST", // 请求方式
            // url: localUrlLink + iscp_port + "/tjAiAssistant/email/verCode", //请求后台地址
            url: localUrlLink + iscp_port + "/yipailu/email/verCode", //请求后台地址
            dataType: "json",
            data: data,
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              Authentication: AuthenticationSession,
              sign: sign,
              timestamp: timestamp,
            },
            success: (res, txt, xhr) => {
              if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                let Authentication = xhr.getResponseHeader("Authentication");
                if (res.code == 200) {
                  if (Authentication) {
                    this.sendAuthCode1 = false;
                    // 90秒倒计时
                    this.time1 = 90;
                    const timetimer1 = setInterval(() => {
                      this.time1--;
                      if (this.time1 <= 0) {
                        this.sendAuthCode1 = true;
                        // 清除定时器
                        clearInterval(timetimer1);
                      }
                    }, 1000);
                    sessionStorage.setItem("Authentication", Authentication);
                    mui.toast("验证码已发送至内网邮箱！", {
                      duration: "long",
                      type: "div",
                    });
                    addOperator(4, 6, "发送验证码", 1, 1, "发送验证码成功");
                  } else {
                    mui.toast("令牌校验失败", {
                      duration: "long",
                      type: "div",
                    });
                  }
                } else {
                  addOperator(4, 6, "发送验证码", 1, 0, "发送验证码失败");
                  mui.toast(res.resultValue, {
                    duration: "long",
                    type: "div",
                  });
                }
              } else {
                mui.toast("完整性校验失败", {
                  duration: "long",
                  type: "div",
                });
              }
            },
            error: function (e) {
              mui.toast("请求异常请稍后再试", {
                duration: "long",
                type: "div",
              });
            },
          });
        },
        // 确认设置 调用接口
        btn() {
          userId = sessionStorage.getItem("userId");
          orgId = sessionStorage.getItem("unitId");
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = "";
          }
          if (this.toMail == "" || this.verificationNum == "") {
            return mui.toast("内网邮箱和验证码不能为空", {
              duration: "long",
              type: "div",
            });
          }
          let data = {
            userId: userId,
            orgId: orgId,
            securityCode: this.verificationNum,
            timestamp: new Date().getTime() + "",
          };
          data = JSON.stringify(data);
          let AuthenticationSession = sessionStorage.getItem("Authentication");
          let sign = sm3(data);
          $.ajax({
            method: "POST", //请求方式
            // url: localUrlLink + iscp_port + "/tjAiAssistant/email/verifyCode", //请求后台地址
            url: localUrlLink + iscp_port + "/yipailu/email/verifyCode", //请求后台地址
            data: data,
            dataType: "json",
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              Authentication: AuthenticationSession,
              sign: sign,
            },
            success: (res, txt, xhr) => {
              if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                let Authentication = xhr.getResponseHeader("Authentication");
                // 成功的回调
                if (res.code == 200) {
                  if (Authentication) {
                    sessionStorage.setItem("Authentication", Authentication);
                    addOperator(4, 1, "邮箱设置", 1, 1, "设置邮箱成功");
                    sessionStorage.setItem("toMail", this.toMail);
                    // mui.toast 消息提示框
                    mui.toast("设置成功", {
                      duration: "long",
                      type: "div",
                    });

                    $(location).attr("href", "Home.html");
                  }
                } else if (res.code == 500) {
                  // 消息提示框
                  mui.toast(res.resultValue, {
                    duration: "long",
                    type: "div",
                  });
                } else {
                  addOperator(4, 1, "邮箱设置", 1, 0, "设置邮箱失败");
                  mui.toast(res.resultHint, {
                    duration: "long",
                    type: "div",
                  });
                }
              }
            },
          });
        },
        home() {
          $(location).attr("href", "Home.html?flag=flag");
        },
      },
    });
  </script>
</html>
